import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import type { SwiperItemProps, TeacherReportData } from '../../interface'

interface Props extends SwiperItemProps, Pick<TeacherReportData, 'special_day_module'> {}

export const FifthPage = (props: Props) => {
    const data = props.special_day_module

    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })
    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page} ref={ref}>
            <div className={styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>
                        <span>{data?.time ?? '-'}</span>是特别的一天
                    </p>
                    <p>这一天，</p>
                    <p>
                        有
                        {Number(data?.hour || 0) > 0 && (
                            <>
                                <span>{data?.hour}</span>小时
                            </>
                        )}
                        {Number(data?.minute || 0) > 0 && (
                            <>
                                <span>{data?.minute}</span>分
                            </>
                        )}
                        都奔赴在讲台上，
                    </p>
                    <p>是全年授课时间最多的一天</p>
                </div>
            </div>
            <div className={styles.clockImage} />
            <div className={styles.page_bottom}>
                <div className={styles.page_bottom_content}>
                    <p>正是因为您一片耐心的灌浇</p>
                    <p>一番耕耘的辛劳</p>
                    <p>才会有桃李的绚丽</p>
                </div>
            </div>
        </div>
    )
}

export default FifthPage
